<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海豚电影</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4729176_sdqzv2ofd8.css">
    <link rel="stylesheet" href="./css/public.css">
</head>
<body>
    <style>
        
        header{
            background: rgb(240,61,55);
            width: 100%;
            height: 190px;
            top: 0;
            color: white;
            position: fixed;
            display: flex;
            align-items: center;
            justify-content: center; 
            flex-direction: column;
            font-size: 14px;
            
        }
        header .iconfont{
            font-size: 50px;
        }
        header span{
            margin-top: 5px;
        }
        .dingdan{
            width: 100%;
            height: 100px;
            top: 160px;
            position: fixed;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: #fff;
        }
        .dianying .iconfont{
            font-size: 25px;
            color: rgb(240,59,53);
        }

        .shangpin .iconfont{
            font-size: 30px;
            color:rgb(55,212,191)
        }
        .dianying,.shangpin {
            display: flex;
            align-items: center;
            justify-content: center; 
            flex-direction: column;
            
        }
        .dianying span{
            margin-top: 5px;
        }
        .shangpin span{
            margin-top: 1px;
        }

        .list { 
            background-color: #fff;
            position: fixed;
            top: 270px;
            width: 100%;
        }
        .list .item {
           border-bottom: 1px solid #999;
           height: 44px;
           display: flex;
           
           justify-content: space-between;
           align-items: center;
           margin-left: 15px;
           margin-right: 15px;  
        }
        .list .item:last-child {
            border: none;
        }
        
        
    </style>
    <header>
            <i class="iconfont icon-haitun"></i>
            <span>立即登录</span>
    </header>
    <div class="dingdan">
        <div class="dianying">
            <i class="iconfont icon-dianying "></i>
            <span>电影订单</span>
        </div>
        <div class="shangpin">
            <i class="iconfont icon-shangpin"></i>
            <span>商品订单</span>
        </div>
    </div>

    <ul class="list">
        <li class="item">
            <span>优惠券</span>
            <i class="iconfont icon-youjiantou-01"></i>
        </li> 
        <li class="item">
            <span>余额</span>
            <i class="iconfont icon-youjiantou-01"></i>
        </li> 
        <li class="item">
            <span>设置</span>
            <i class="iconfont icon-youjiantou-01"></i>
        </li> 
        
    </ul> 

    <footer>
        <a class="item" href="index.html">
            <i class="iconfont icon-dianying"></i>
            <span>电影</span>
        </a>
        <a class="item" href="cinema.html">
            <i class="iconfont icon-yingyuan"></i>
            <span>影院</span>
        </a>
        <a class="item" href="video.html">
            <i class="iconfont icon-shipin"></i>
            <span>视频</span>
        </a>
        <a class="item" href="my.html">
            <i class="iconfont icon-wode"></i>
            <span>我的</span>
        </a>
    </footer>
    <script>
        // 设置底部导航栏的 active 状态
document.querySelectorAll('footer .item').forEach(item => {
        item.addEventListener('click', function(event) {
            event.preventDefault(); // 阻止默认跳转
            document.querySelectorAll('footer .item').forEach(el => {
                el.classList.remove('active');
            });
            this.classList.add('active');

            // 动态跳转到目标页面
            const href = this.getAttribute('href');
            window.location.href = href;
        });
    });

    // 页面加载时设置底部导航栏的 active 状态
    document.addEventListener('DOMContentLoaded', () => {
        const currentPage = window.location.pathname.split('/').pop();
        document.querySelectorAll('footer .item').forEach(item => {
            const href = item.getAttribute('href');
            if (href === currentPage) {
                item.classList.add('active');
            }
        });
    });
    </script>
</body>
</html>